<template>
    <Header>
        <div class="inner-wrp">
            <div class="logo"/>
            <Menu
                    @on-select="handleClick"
                    theme="dark"
                    mode="horizontal"
                    active-name="main"
                    style="lineHeight: 64px;width: 600px ;float: left">
                <MenuItem name="main">首页</MenuItem>
                <MenuItem name="docs">开发文档</MenuItem>
                <MenuItem name="home">管理中心</MenuItem>
            </Menu>
            <Menu
                    @on-select="handleClick2"
                    theme="dark"
                    mode="horizontal"
                    active-name="login"
                    style="lineHeight: 64px;width: 350px; float: right">
                <MenuItem name="login">登录</MenuItem>
                <MenuItem name="register">注册</MenuItem>
                <MenuItem name="into">免费入住</MenuItem>
            </Menu>
        </div>

        <Modal
                footer-hide
                v-model="visible"
                title="登录"
        >
            <Form class="login-form" ref="form" :model="form" :rules="formRules">
                <FormItem>
                    <Input type="text" v-model="form.username" placeholder="Username">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem>
                    <Input type="password" v-model="form.password" placeholder="Password">
                    <Icon type="ios-lock-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem>
                    <Checkbox v-model="form.remember">记住账号</Checkbox>
                    <a class="login-form-forgot" href="#">忘记密码</a>
                    <Button type="primary" @click="handleSubmit" class="login-form-button">
                        登录

                    </Button>
                    <a href="#">
                        立即注册
                </a>
                </FormItem>
            </Form>
        </Modal>
    </Header>

</template>

<script>
    export default {
        name: 'IHeader',
        data() {
            return {
                loading: false,
                visible: false,
                form: {
                    username: '',
                    password: '',
                    remember: false
                },
                formRules: {}
            }
        },
        methods: {
            showModal() {
                this.visible = true;
            },
            handleSubmit (e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                    }
                });
            },
            handleClick (name) {
                console.log(name)
                this.$router.push({name:name})
            },
            handleClick2(name){
                switch (name) {
                    case'register':
                        break
                    case 'login':
                        this.showModal()
                        break
                }

            }
        }
    }
</script>
<style scoped>
    .logo {
        width: 120px;
        height: 31px;
        background: #eee;
        margin: 16px 24px 16px 0;
        float: left;
    }

    .login-form .login-form {
        max-width: 300px;
    }

    .login-form .login-form-forgot {
        float: right;
    }

    .login-form .login-form-button {
        width: 100%;
    }
</style>